<template>
  <div class="smallvideo">
    <video :src="$route.query.url" @click="play" ref="video"></video>
    <div class="icon">
      <div class="icon-t" @click="$router.push({ path: '/downapp' })"><img :src="$route.query.img" alt="" /></div>
      <div class="icon-x" @click="$router.push({ path: '/downapp' })">
        <div class="show">
          <img
            src="//p1.meituan.net/moviemachine/5377c2c03dacf20b6e286e3e72dd57911272.png"
            alt=""
          />
        </div>
        <div class="text">{{ $route.query.count }}</div>
      </div>
      <div class="icon-x" @click="$router.push({ path: '/downapp' })">
        <div class="show">
          <img
            src="//p0.meituan.net/moviemachine/8bdff1556f02f8f4a209643aba9b1fcf1636.png"
            alt=""
          />
        </div>
        <div class="text">评论</div>
      </div>
      <div class="icon-x" @click="$router.push({ path: '/downapp' })">
        <div class="show">
          <img
            src="//p0.meituan.net/moviemachine/7e7aaf09a232efb02ff8697deb522d151367.png"
            alt=""
          />
        </div>
        <div class="text">分享</div>
      </div>
    </div>
    <div class="playing" v-show="playing" @click="play"></div>
    <div class="title">
      {{$route.query.title}}
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      playing: true,
    };
  },
  created: function () {
    // this.getPlayListDetail(this.$route.query.url);
    console.log(this.$route.query.url);
    console.log(this.$route.query.img);
    console.log(this.$route.query.count);
    console.log(this.$route.query.title);
  },
  methods: {
    play: function () {
      if (!this.$refs.video.paused) {
        this.$refs.video.pause();
      } else {
        this.$refs.video.play();
      }
      this.playing = this.$refs.video.paused;
    },
  },
};
</script>

<style lang="less" scoped>
.smallvideo {
  position: relative;
  background: black;
  video {
    width: 100%;
    height: 100vh;
  }
  .icon {
    position: absolute;
    right: 15px;
    top: 40%;
    .icon-t {
      img {
        width: 48px;
        height: 48px;
        margin-bottom: 26px;
        border-radius: 50%;
      }
    }
    .icon-x {
      .show {
        width: 48px;
        height: 48px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, 0.42);
        border-radius: 100%;
        margin-bottom: 4px;
        img {
          width: 22px;
          height: 22px;
        }
      }
      .text {
        margin-bottom: 14px;
        font-size: 14px;
        color: #ffffff;
        text-align: center;
        text-shadow: 0 0 0.06rem rgb(0 0 0 / 50%);
      }
    }
  }

  .playing {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 45%;
    left: 45%;
    background: url("../assets/playing.png") no-repeat;
    background-size: 100% 100%;
  }

  .title {
    position: absolute;
    bottom: 80px;
    left: 20px;
    width: 282px;
    height: 24px;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    line-height: 24px;
    text-shadow: 0 0 3px rgb(0 0 0 / 30%);
    font-size: 19px;
  }
}
</style>